<template>
    <div style="height: 400px;" class="maindd">
        <el-steps direction="vertical">
            <el-step :title="tt.TaskName" v-for="tt in tasklist" :status="tt.Status == 2 || tt.Status == 3 ? 'success' : 'wait'">
                <template v-slot:description>
                    <div class="tablesss">
                        <div>
                            <span>
                                开始时间:{{ tt.BeginTime }}
                            </span>
                            <br>
							<span>
							    结束时间:{{ tt.EndTime }}
							</span>
							<br>
                            <span v-if="tt.UserName">
                                负责人:{{ tt.UserName }}
                            </span>							
                            <span v-else>
                                还未分配
                            </span>
                        </div>
                        <div>
                            <ElButton v-if="tt.Status==2" type="finish" size="small"  @click="send(tt)">确认完成</ElButton>
                            <ElButton v-if="tt.Status==2" type="danger" size="small"  @click="fanging(tt)">返工</ElButton>
                            <ElButton v-if="tt.IsAccept==2" type="success" size="small" @click="detail(tt.Id)" style="background-color:blue;">提交任务详情</ElButton>
                        </div>
                    </div>
                </template>
            </el-step>

        </el-steps>
        <el-drawer v-model="achieveVisble" width="600px"  >
            <template #header="{ titleClass }">
				<div :class="titleClass" style="font-size: 30px;color: black;">提交任务详情</div>
			</template>
            <Achievement :Id="Id" v-if="achieveVisble" @cloesdrawer="cloesdrawer"></Achievement>
        </el-drawer>
    </div>
</template>

<script setup lang="ts">
import Taskinfoapi from '@/api/taskapi';
import { ElButton ,ElDrawer, ElMessage, ElMessageBox} from 'element-plus';
import Achievement from './achievement.vue';
import { onMounted, ref } from 'vue';

const props = defineProps({
    Id: Number
})
const achieveVisble = ref(false)
const Id = ref()
const active = ref(0);
const tasklist = ref<any[]>([]);
const getdata = () => {
    Taskinfoapi.getall({ id: props.Id }).then(res => {		
        res.data.forEach((element: any) => {
            if (element.Status == 2) {
                active.value++;
            }
        });
        tasklist.value = res.data
    }).catch(err => {
        console.log(err)
    })
}

const send =(task:any) =>{

    ElMessageBox.confirm("请问确定该任务已完成吗？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
    }).then(() => {
        task.Status = 3;
		console.log("task=",task)
        Taskinfoapi.send(task).then(res => {			
            if (res.code > 0) {
                ElMessage.success("任务完成")
                getdata()
            }
        })
    }).catch(() => { })
   
}
const fanging =(task:any)=>{
    ElMessageBox.confirm("请问确定让其返工吗吗？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
    }).then(() => {
        task.Status = 1;
        Taskinfoapi.send(task).then(res => {
			console.log("task=",task)
            if (res.code > 0) {
                ElMessage.success("操作完成")
                getdata()
            }
        })
    }).catch(() => { })
}
const detail=(id:any)=>{
    Id.value = id;
	console.log("Id.value=",id)
    achieveVisble.value = true;
}
//关闭
const cloesdrawer = ()=>{

}

onMounted(() => {
    getdata()
})
</script>

<style scoped>
.tablesss{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
}
.maindd {
    overflow: scroll;
    margin-bottom: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    height: 400px;
}

</style>